<template>
    <div class="monitor-wrap">
        <page-wrapper>
            <table-search @search="search(1)" :isExtra="false" @reset="reset()">
                <template slot="form">
                    <form-item label="">
                        <a-input v-model.trim="form.jarName" placeholder="储液罐名称" />
                    </form-item>
                    <form-item label="">
                        <a-select
                            style="width: 200px"
                            v-model="form.factoryName"
                            allowClear
                            showSearch
                            optionFilterProp="name"
                            placeholder="请选择厂区"
                        >
                            <a-select-option
                                :value="item.factoryName"
                                :name="item.factoryName + item.factoryCode"
                                v-for="item in factoryBox"
                                :key="item.factoryCode"
                                >{{ item.factoryName }}</a-select-option
                            >
                        </a-select>
                    </form-item>
                    <form-item label="">
                        <a-select
                            style="width: 200px"
                            v-model="form.lineName"
                            allowClear
                            showSearch
                            optionFilterProp="name"
                            placeholder="请选择产线"
                        >
                            <a-select-option
                                :value="item.lineName"
                                :name="item.lineName + item.lineCode"
                                v-for="item in lineBox"
                                :key="item.lineName"
                                >{{ item.lineName }}</a-select-option
                            >
                        </a-select>
                    </form-item>
                    <form-item label="">
                        <a-input v-model.trim="form.jarCode" placeholder="储液罐编码" />
                    </form-item>
                </template>
                <template slot="extra">
                    <a-button
                        class="filter-item"
                        type="primary"
                        :disabled="hasPerm(['liquid:monitor:add'])"
                        icon="plus"
                        @click="addInfo()"
                        >新增储液罐</a-button
                    >
                    <a-button
                        class="filter-item btn_space"
                        type="danger"
                        @click="remove()"
                        :disabled="!selectionBox.length || hasPerm(['liquid:monitor:remove'])"
                        icon="delete"
                        >删除</a-button
                    >
                </template>
            </table-search>
        </page-wrapper>
        <a-spin tip="加载数据..." :spinning="loading">
            <a-row :gutter="16">
                <a-col :xs="24" :sm="24" v-for="item in list" :key="item.jarCode" :md="12" :xl="8" :xxl="6">
                    <tank-item
                        :info="item"
                        class="col_tank_item"
                        @info="showInfo"/>
                </a-col>
            </a-row>
            <a-empty class="empty_box" v-if="total == 0" description="暂无数据" />
            <div class="pagination_box" v-if="total">
                <a-pagination
                    size="small"
                    :default-current="form.current"
                    :page-size.sync="form.size"
                    :total="total"
                    @change="pageChange"
                />
            </div>
        </a-spin>
        <!-- 基础信息 -->
        <template v-if="isShowInfo">
            <monitor-info :info="itemInfo" @cancel="isShowInfo = false" />
        </template>
        <!-- 趋势 -->
        <template v-if="isHistory">
            <monitor-history :info="itemInfo" @cancel="isHistory = false" />
        </template>
        <!-- 日志 -->
        <template v-if="isLog">
            <monitor-log :info="itemInfo" @cancel="isLog = false" />
        </template>
        <!-- 操作 -->
        <template v-if="isControl">
            <monitor-control :info="itemInfo" @cancel="isControl = false" />
        </template>
    </div>
</template>
<script>
import table from '@/mixins/table';
import { columns } from '../tank/columns';
import TankItem from './components/tank-item.vue';
import MonitorInfo from './components/info';
import MonitorHistory from './components/history'
import MonitorLog from './components/log.vue'
import MonitorControl from './components/controls'
import { remoteList } from '@/api/monitor/index';
import FactoryApi from '@/api/system/factory';
import ProductLineApi from '@/api/system/production';

export default {
    name: 'LiquidMonitor',
    mixins: [table],
    components: {
        TankItem,
        MonitorInfo,
        MonitorHistory,
        MonitorLog,
        MonitorControl
    },
    data() {
        let originForm = {
            jarName:"",
            factoryName: undefined,
            lineName: undefined,
            jarCode: undefined
        };
        return {
            originForm,
            form: {
                ...originForm,
                alarmStatus:null,
				status:null
            },
            columns,
            itemInfo: null,
            isShowInfo: false,
            isHistory:false,
            isLog:false,
            isControl:false,
            lineBox: [],
            factoryBox: [],
            timer:null
        };
    },
    watch: {
        'form.factoryName': function(val){
            this.form.lineName = undefined;
            this.getWorklineList();
        }
    },
    async created() {
        await this.getSource();
        await this.getWorklineList();
        this.search(1);
        this.timer = setInterval(()=>{
            this.search();
        },5*2*1000)
    },
    methods: {
        async search(page) {
            try {
                if (page) {
                    this.loading = true;
                    this.form.page = page;
                    this.list = [];
                }
                let res = await remoteList(this.form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
            } finally {
                this.loading = false;
            }
        },
        showInfo({type,info}) {
            this[type] = true;
            console.log(info)
            this.itemInfo = info;
        },
        //获取相关的资源列表
        async getSource() {
            let factoryResult = await FactoryApi.remoteList({ page: 1, size: 50 });
            this.factoryBox = factoryResult.data.list;
        },
        //根据厂区获取产线
        async getWorklineList() {
            let { factoryName } = this.form;
            let lineResult = await ProductLineApi.remoteList({ page: 1, size: 50, factoryName });
            this.lineBox = lineResult.data.list;
        }
    },
    beforeDestroy(){
        clearInterval(this.timer)
    }
};
</script>
<style lang="scss" scoped>
::v-deep .ant-card-body{
    padding-bottom: 10px;
}
.empty_box{
    margin-top: 40px;
}
.col_tank_item {
    margin-top: 20px;
}
</style>
